<template>
  <!--前台页面骨架-->
  <div>
    <header class="zui-header">
      <!--顶部LOGO与搜索栏-->
      <div class="top-bar">
        <!-- <div class="logo">
        </div> -->
        <!--导航菜单-->
        <ul class="menu-list">
          <router-link to="/opera/index">
            <li class="menu-li">首 页</li>
          </router-link>
          <!-- <router-link to="/mall/index"><li class="logo-li"></li></router-link> -->
          <router-link to="/display/list">
            <li class="menu-li">京剧展示</li>
          </router-link>
          <router-link to="/blog/list">
            <li class="menu-li">交流论坛</li>
          </router-link>
          <router-link to="/question/index">
            <li class="menu-li">知识趣答</li>
          </router-link>
          <router-link to="/product/list">
            <li class="menu-li">积分商城</li>
          </router-link>
          <router-link to="/course/list">
            <li class="menu-li">教学资源</li>
          </router-link>
          <router-link to="/activity/list">
            <li class="menu-li">宣传栏板</li>
          </router-link>
          <!-- <router-link to="/activity/list">
            <li class="menu-li">
              京剧活动
              <ul class="sub-menu">
                <router-link to="/activity/publish">
                  <li class="sub-item">我发起的活动</li>
                </router-link>
                <router-link to="/activity/signin">
                  <li class="sub-item">我报名的活动</li>
                </router-link>
              </ul>
            </li>
          </router-link> -->
        </ul>
        <ul class="menu-list" v-show="currUser.user">
            <!-- <ul v-if="menu.hasChild" class="sub-menu">
              <li class="sub-item" v-for="(subMenu, id) in menu.children" :key="id">
                <router-link :to="subMenu.action"></router-link>{{subMenu.text}}
              </li>
            </ul> -->
          <!-- </router-link>
          <router-link to="/record/diet">
            <li class="menu-li">
              <span>我的记录</span>
            </li>
          </router-link> -->
          <!-- <router-link to="/user/fav">
            <li class="menu-li">
              <span>个人中心</span>
            </li>
          </router-link> -->
          <li class="menu-li">
            <span @click="toProfile()">个人中心</span>
            <ul class="sub-menu">
              <router-link to="/user/fav">
                <li class="sub-item">我的收藏</li>
              </router-link>
              <router-link to="/order/my/list">
                <li class="sub-item">兑换订单</li>
              </router-link>
              <router-link to="/activity/publish">
                <li class="sub-item">发起的活动</li>
              </router-link>
              <router-link to="/activity/signin">
                <li class="sub-item">报名的活动</li>
              </router-link>
              <li class="sub-item" @click="logout()">退出登录</li>
            </ul>
          </li>
        </ul>
        <ul class="menu-list" v-show="!currUser.user">
          <router-link to="/user/login">
            <li class="menu-li">
              <span>登录</span>
            </li>
          </router-link>
          <!-- <router-link to="/user/fav">
            <li class="menu-li">
              <span>注册</span>
            </li>
          </router-link> -->
        </ul>
        
        <!--右侧用户-->
        <!-- <div class="user-login">
          <ul v-show="!currUser.user">
            <li><router-link to="/user/login"><el-icon><User /></el-icon> <span>登录</span></router-link></li>
            <li @click="toReg()">注册</li>
          </ul>
          登录后
          <ul v-if="currUser.user">
            <li>
              <el-avatar size="small" :src="currUser.user.pic" style="float: left;margin-top:4px;"/>
              <router-link to="/user/profile">{{ currUser.user.nickName }}</router-link>
            </li>
            <li @click="logout()">退出</li>
          </ul>
        </div> -->

        <!--全局搜索框-->
        <!-- <div class="search-bar">
          <input type="text" class="search-ipt" v-model="queryForm.kw" placeholder="请输入关键字">
          <el-button size="small" class="search-button" icon="Search" @click="onSearch()">搜索</el-button>
        </div> -->
      </div>
    </header>
    <div class="home-page">
      <router-view></router-view>
      
    </div>

    <div class="footer">
      <p>非遗京剧京剧平台 2025 <router-link to="/admin/login">管理员登录</router-link></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, computed  } from "vue";
import { useRouter } from "vue-router";
import { getCache, removeCache } from "@/utils/cache";
import { ElMessage, ElMessageBox } from "element-plus";
import { CacheToken } from "@/constants/cacheKey";
import { useStore } from 'vuex';

const store = useStore();
const router = useRouter();
const queryForm = reactive({
    kw: "",
});
// let currUser = reactive({});
/**
 * 初始化
 */
const onInit = () => {
  const userInfo = getCache(CacheToken);
  if(userInfo){
    console.log('登录用户：', userInfo)
    store.commit('setFrontLoginUser', userInfo);//使用Vuex保存登录用户
  }
  console.log('从Vuex获取登录用户！store.state.frontUser:', store.state.frontUser)
};

// 定义计算属性
const currUser = computed(() => store.state.frontUser);

/**
 * 退出登录
 */
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗', "提示").then(() => { 
    removeCache(CacheToken);
    store.commit('setFrontLoginUser', {});
    router.replace("/opera/index");
  });
};
const toReg = ()=>{
  router.push("/user/register");
}

//搜索
const toProfile= ()=>{
  router.push("/user/profile");
}

onMounted(() => {
  onInit();
});
// onInit();
</script>

<style scoped>
body, html{
  padding: 0;
  margin: 0;
}
.h-content{
  width: 100%;
}
.h-content{
  max-width: 820px;
  margin: 0 auto;
}
.menu-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.menu-list .menu-li{
  display: inline-block;
  padding: 5px 20px;
  line-height: 45px;
  font-size: 16px;
  position: relative;
  color: #c63c26;
  font-weight: bold;
  width: 120px;
  text-align: center;
}
.menu-list a{
  text-decoration: none;
  color: #fff;
}
.menu-list .menu-li:hover{
  background-color: #c63c26;
  color: #fff;
  cursor: pointer;
}
.menu-list .menu-logo{
  width: 160px;
  height: 45px;
}
.zui-header{
  border-bottom: 2px solid #333;
  height: auto;
}
.zui-header .zui-logo{
  width: 280px;
  height: 55px;
  vertical-align: middle;
  float: left;
  margin: 4px 0 0;
}
.sub-menu{
  display: none;
  list-style: none;
  position: absolute;
  top: 52px;
  left: 0;
  padding: 0;
  z-index: 99999;
  width: 120px;
  font-size: 14px;
}
.sub-menu .sub-item:hover{
  background-color: #c07677;
  color: #fff;
}
.sub-menu .sub-item{
  padding: 0 20px;
  line-height: 50px;
  font-size: 14px;
  border-top: none;
  background-color: #c35556;
}
.menu-list .menu-li:hover .sub-menu{
  display: block;
}
.top-bar{
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.top-bar .user-login{
  float: right;
  /* width: 200px; */
  margin-top: 10px;
  font-size: 14px;
}
.user-login li{
  display: inline-block;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  margin: 0 5px;
  font-size: 14px;
  color: #fff;
}
.user-login a{
  color: #fff;
  text-decoration: none;
}
.user-login li:hover, .user-login a:hover, .footer a:hover, .robot a:hover{
  color: #e2a388;
}
.home-page{
  margin: 0 auto;
  min-height: 680px;
  padding-bottom: 20px;
  max-width: 1440px;
  position: relative;
}
.footer{
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #888;
  font-size: 13px;
  border-top: 1px solid #ddd;
  margin-top: 20px;
}
.footer p{
  margin: 0;
  padding: 0;
}
.footer a{
  color: #666;
  text-decoration: underline;
}
.menu-li:hover .ai{
  display: none;
}
.menu-li:hover .ai-on{
  display: block;
}
.logo-li{
  background-image: url('../assets/images/logo.png');
  height: 55px;
  float: left;
  width: 155px;
  background-size: 100%;
}
</style>
